<template>
    <u-sticky>
        <view class="navBar">
            <view class="status_bar"></view>
            <view style="margin-bottom: 35rpx;">
                <u-icon name="arrow-left" color="#fff" size="22" @click="handleNavigateBack"></u-icon>
            </view>
            <view class="justify-between mb26">
                <up-image 
                    src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" 
                    width="120rpx" 
                    height="120rpx" 
                    shape="circle"
                ></up-image>
                <view class="flex1 white" style="margin-left: 29rpx;">
                    <view class="justify-between">
                        <text class="font32 weight">会设计的橙子</text>
                        <view class="align-center">
                            <i class="iconfont icon-pinglun" style="font-size: 36rpx; color: #fff;"></i>
                            <view class="btn">关注</view>
                        </view>
                    </view>
                    <view class="font20" style="margin: 4rpx 0;">ip：浙江</view>
                    <view class="font26">获赞：15892&nbsp; 丨&nbsp; 关注：26 &nbsp;丨&nbsp; 粉丝：95</view>
                </view>
            </view>
            <view class="font28 white justify-between" style="margin-bottom: 75rpx;">
                <text>此夜无眠</text>
                <view class="align-center">
                    <text>关于Ta</text>
                    <u-icon name="arrow-right" color="#fff"></u-icon>
                </view>
            </view>
            <u-tabs :list="tabsList" lineColor="#966BFF"></u-tabs>
        </view>
    </u-sticky>
    <view class="app-container">
        <Dynamic v-for="item in 10" :key="item" />
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { handleNavigateBack } from '@/plugins/uniApp';
import Dynamic from '@/components/Dynamic/index.vue';

const tabsList = ref([
    { name: '帖子(1528)' },
    { name: '点赞(1528)' },
    { name: '收藏(1528)' },
    { name: '橱窗(1528)' },
])
</script>

<style lang="scss" scoped>
.navBar {
    height: 480rpx;
    padding: 28rpx 30rpx 0;
    background: url('https://v.iiar.cn/images/mine_bg.png') no-repeat;
    background-size: 100% 100%;

    .status_bar {
        height: var(--status-bar-height);
    }

    .btn {
        margin-left: 36rpx;
        padding: 9rpx 38rpx;
        background: #FFFFFF;
        border-radius: 28rpx;
        font-size: 22rpx;
        color: #8BC6E6;
    }
}
</style>